<template>
  <div>
    <nav class="shop-nav">
      <a class="back" @click="$router.back()">
        <i class="iconfont icon-arrow_left"></i>
      </a>
      <div class="header-title">
        <span class="header-text">确认订单</span>
      </div>
    </nav>

    <div class="options-bar options-card">
      <ul>
        <li>
          <span>请选择收货地址</span>
          <a></a>
          <i class="iconfont icon-keyboard_arrow_right"></i>
        </li>
        <li>
          <span>预计时间</span>
          <a>选择送达时间</a>
          <i class="iconfont icon-keyboard_arrow_right"></i>
        </li>
        <li>
          <span>支付方式</span>
          <a>微信支付</a>
          <i class="iconfont icon-keyboard_arrow_right"></i>
        </li>
      </ul>
    </div>

    <div class="order-details options-card">
      <ul>
        <li>
          <h1 class="shop-name">嘉禾一品(温都水城)</h1>
        </li>
        <li class="food-detials" v-for="(cartFood, index) in cartFoods" :key="index">
          <img :src="cartFood.icon" />
          <div class="food-name">
            <span class="content">
              <span class="mini-tag">折</span>
              <h2>{{cartFood.name}}</h2>
            </span>
            <span class="food-count">x {{cartFood.count}}</span>
          </div>
          <div class="food-price">
            <span class="now">￥{{cartFood.price}}</span>
            <span class="old" v-if="cartFood.oldPrice">￥{{cartFood.oldPrice}}</span>
          </div>
        </li>
        <li class="other">
          <span class="left"><h2>包装费</h2></span>
          <span class="right">￥4</span>
        </li>
        <li class="other">
          <span class="left disflex">
            <span class="mini-tag">减</span>
            <h2>配送费(老王专送)</h2>
          </span>
          <span class="right">￥0</span>
        </li>
        <li class="other">
          <span class="left disflex">
            <span class="mini-tag">￥</span>
            <h2>红包/抵押卷</h2>
          </span>
          <span class="right">
            <span class="select">
              请选择可用红包
              <i class="iconfont icon-keyboard_arrow_right"></i>
            </span>
          </span>
        </li>
        <li class="total-bottom other">
          <div class="left"><span>优惠说明</span></div>
          <div class="right">
            <span>已优惠<span class="preferential">￥51.9</span></span>
            <span
              >小计￥
              <h3 class="subtotal">{{subtotal}}</h3></span
            >
          </div>
        </li>
      </ul>
    </div>
  

    <div class="pay-content">
      <div class="content-left">
        <span
          >合计￥
          <h3 class="subtotal">{{subtotal}}</h3></span
        >
        <span class="preferential">已优惠￥51.9</span>
      </div>
      <div class="content-right" @click="tip">
        <span>提交订单</span>
      </div>
    </div>
  </div>
</template>

<script>
import {Toast} from 'vant'
import {mapState} from 'vuex'
export default {
  computed:{
    ...mapState(['cartFoods']),

    subtotal(){
      let totalMoney=0
      for(let i = 0; i < this.cartFoods.length; i++){
        totalMoney += this.cartFoods[i].price * this.cartFoods[i].count
      }
      return totalMoney
    }
  },
  methods:{
    tip(){
      Toast('该功能正在开发中！')
    }
  }
};
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '../../common/stylus/mixins.styl';

.shop-nav {
  position: relative;
  background: rgb(2 167 116)
  width: 100%;
  height: 45px;
  line-height: 45px;
}

.shop-nav::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.shop-nav .back {
  display: block;
  position: absolute;
  top: 0px;
  left: 5px;
}

.shop-nav .header-title {
  width: 100%;
  text-align: center;
}
.shop-nav .header-title .header-text {
  font-size: 17px;
  color: #fff;
}

.icon-arrow_left {
  display: block;
  font-size: 20px;
  color: #fff;
}

.options-card {
  left: 50%;
  transform: translateX(-50%);
  width: 95%;
  background-color: #fff;
  border: 1px solid #e4e4e4;
  border-radius: 10px;
}

.options-bar {
  position: absolute;
  top: 54px;
}

.options-card ul {
  padding: 8px;
}

.options-bar ul li {
  position: relative;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
}
.options-bar ul li span {
  font-weight: 500;
}
.options-bar ul li a {
  position: absolute;
  right: 20px;
  font-size: 13px;
  color: #049d6d;
}

.icon-keyboard_arrow_right {
  position: absolute;
  top: 1px;
  right: 0;
  font-size: 12px;
  color: #000;
}
.order-details {
  position: absolute;
  top: 200px;
  background-color: #fff;
}
.order-details ul li {
  margin: 10px 5px;
}
.order-details ul li:first-child {
  margin-bottom: 16px;
}
.order-details ul li:last-child {
  margin-bottom: 0;
}
.order-details .shop-name {
  font-size: 14px;
  color: #999;
}
.order-details .food-detials {
  display: flex;
}
.order-details .food-detials img {
  width: 60px;
  height: 60px;
  border-radius: 5px;
  overflow: hidden;
}
.order-details .food-detials .food-name {
  flex: 4;
  height: 50px;
  padding: 0 8px;
}
.order-details .food-detials .food-name .content {
  display: flex;
  margin-bottom: 3px;
}
.order-details .food-detials .food-name .content h2 {
  font-size: 14px;
  font-weight: 550;
  letter-spacing: 1px;
  margin-left: 3px;
}
.order-details .food-detials .food-name .food-count {
  font-size: 12px;
  color: #999;
}

.mini-tag {
  display: inline-block;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  color: #f1f1f1;
  background-color: #f63515;
  font-weight: 600;
  font-size: 12px;
  border-radius: 5px;
  overflow: hidden;
}
.order-details .food-detials .food-price {
  flex: 1;
  height: 50px;
  text-align: right;
  letter-spacing: -1px;
}
.order-details .food-detials .food-price .now {
  display: inline-block;
  margin-bottom: 5px;
}
.order-details .food-detials .food-price .old {
  color: #999;
  font-size: 12px;
  text-decoration: line-through;
}
.order-details .other {
  margin-top: 15px;
  height: 20px;
  line-height: 20px;
}
.order-details .other .left {
  float: left;
}
.order-details .other .left h2 {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
}
.order-details .other .right {
  float: right;
}
.disflex {
  display: flex;
}
.disflex h2 {
  margin-left: 5px;
}
.select {
  position: relative;
  font-size: 12px;
  color: #d25a66;
  padding: 2px 18px 2px 10px;
  border-radius: 10px;
  overflow: hidden;
  background-color: #fdedea;
}
.select .iconfont {
  position: absolute;
  top: 0px;
  right: 5px;
  color: #d25a66;
}
.total-bottom {
  top-border-1px(#e4e4e4)
  padding: 20px 0 8px 0;
}
.total-bottom .left {
  font-size: 14px;
  color: #999;
}
.total-bottom .right > span:first-child {
  font-size: 14px;
}
.total-bottom .right > span:last-child {
  margin-left: 10px;
  font-size: 14px;
}
.preferential {
  color: #d25a66;
  font-size: 13px;
  letter-spacing: -1px;
}
.subtotal {
  display: inline-block;
  font-size: 20px;
  font-weight: 600;
}

.pay-content {
  top-border-1px(#e4e4e4)
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
}
.pay-content .content-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 6px 10px;
  text-align: right;
  background-color: #fff;
}
.pay-content .content-left span {
  display: block;
  margin-bottom: 5px;
}
.pay-content .content-right {
  width: 105px;
  height: 48px;
  font-size: 12px;
  color: #fff;
  font-weight: 700;
  line-height: 48px;
  text-align: center;
  background-color: #00b43c;
}
</style>